<template>
    <section>
      <div style="border-top: 1px solid #999999;margin: 5px 140px;">
        <el-row style="margin-top: 18px;background-color: #0008;">
          <el-col :span="8" style="margin: 20px;border-right: 1px solid #999;">
            <el-image :src="videoMsg.v_cover" class="video_img">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </el-col>
          <el-col :span="15">
            <div style="color: white;font-size: 30px;margin-top: 20px;text-align: left;">
              {{videoMsg.v_title}}
            </div>
            <div style="width: 100%;color: #fff;font-size: 20px;text-align: left;margin-top: 20px;">
              <i class="el-icon-menu" style="color: #d88930;"></i>
              播放列表
            </div>
            <div style="margin-top: 10px;">
              <div v-for="(item,index) in videoMsg.urlList" :key="index" @click="toVideoPlay(videoMsg.v_title,item.e_title,item.e_url)" class="video_item">
                {{item.e_title}}
              </div>
            </div>

          </el-col>
        </el-row>
      </div>

      <div class="video_msg">
        <i class="el-icon-film" style="color: #d88930;"></i>
        视频详情
      </div>
      <div style="margin: 10px 140px;background-color: #0008;padding:16px 200px;">
        <el-image :src="videoMsg.v_screenshot" class="video_img">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
        <p class="video_dec">
          {{videoMsg.v_introduction}}
        </p>
      </div>
    </section>
</template>

<script>
    import {getVideoMsg} from "../../axios/api"
    export default {
        name: "videoMsg",
        data(){
            return{
                videoMsg:{}
            };
        },
        mounted() {
            this.getVideoMsg(this.getUrlKey("id"))
        },
        methods:{
            getVideoMsg:async function(id){
                let data = {
                    id: id
                }
                let res = await getVideoMsg(data);
                this.videoMsg = res.msg;
                this.videoMsg.v_introduction = this.videoMsg.v_introduction.replace(/\\n/gm,"\n");
                document.title = this.videoMsg.v_title
            },
            toVideoPlay:function (title, name, url) {
                this.$router.push({ path:'/videoPlay?title='+title+'&name='+name+'&url='+url})
            }
        }
    }
</script>

<style>
  .video_img {
    width: 300px;
    height: 420px;
    color: #C0C4CC;
    background-color: #F5F7FA;
    line-height: 420px;
  }
  .video_item{
    width: 8%;
    padding: 5px 1%;
    margin: 5px;
    font-size: 10px;
    border: 3px solid #606266;
    background-color: #303133;
    color: #999999;
    float: left;
    transition: 0.9s;
    cursor:pointer;
  }
  .video_item:hover{
    background-color: #d88930;
    color: white;
  }
  .video_msg{
    border-bottom: 1px solid #999999;
    margin: 50px 140px 5px 140px;
    font-size: 30px;
    color: white;
    text-align: left;
    padding-left: 10px;
  }
  .video_dec{
    white-space: pre-line;
    color: white;
    font-size: 18px;
    text-align: left;
  }
</style>
